<script setup>
defineOptions({
  name: 'page-day1',
  data() {
    return {
      counter: 100
    }
  },
  created() {
    console.log('created')
  }
})
//
import { ref, reactive, toRefs } from 'vue'
const message = ref('Hello World')
const counter = ref(100)
const isShow = ref(true)
let obj = reactive({
  name: '张三',
  age: 18
})
const { name, age } = toRefs(obj)
function toggle() {
  isShow.value = !isShow.value
  fn()
}
const fn = function () {
  console.log('fn')
}
function getReverseMessage() {
  const str = message.value.split('').reverse().join('')
  return str
}
function changeRef() {
  message.value = 'Hello Vue3'
}
function changeReactive() {
  obj.name = '李四'
  obj.age = 20
}
</script>

<template>
  <div class="page-day1">
    <!-- 显示 message -->
    <p>Message: {{ message }}</p>

    <!-- 显示反转后的 message -->
    <p>Reversed Message: {{ getReverseMessage() }}</p>

    <!-- 修改 message 的按钮 -->
    <button @click="changeRef">Change Message</button>

    <!-- 显示 counter -->
    <p>Counter: {{ counter }}</p>

    <!-- 显示 isShow 的状态 -->
    <p>isShow: {{ isShow ? '显示' : '隐藏' }}</p>

    <!-- 切换 isShow 的按钮 -->
    <button @click="toggle">Toggle isShow</button>

    <!-- 显示 reactive 对象的属性 -->
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>

    <!-- 修改 reactive 对象属性的按钮 -->
    <button @click="changeReactive">Change Reactive Object</button>

    <!-- 根据 isShow 的值动态显示内容 -->
    <div v-if="isShow">
      <p>This content is visible because isShow is true.</p>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
